<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			*{
				box-sizing: border-box;
				font-size: 0.75rem;
			}
			html ,body{
				width: 100%;
				height: 100%;
				padding: 0rem;
				margin: 0rem;
			}
			.container{
				height: 100%;
				background-image: url(img/textures/background.jpg);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.top{
				width: 100%;
				
			}
			.bottom{
				width: 100%;
			}
			.fist_box{
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-left: 0.3125rem;
				padding-top: 0.3125rem;
				margin-left: 0.625rem;
			}
			.fist_box_one{
				width: 33.3%;
				height:2.1875rem;
				background-image: url(img/textures/bg_status.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				
			}
			.icon{
				width:2.5rem;
				height: 1.8125rem;
				background-repeat: no-repeat;
				display: inline-block;
				text-align: center;
				padding-top: 0.4375rem;
				color: white;
				margin-top: -0.0625rem;
				margin-left: -0.3125rem;
			}
			.icon_rank{
				
				background-image: url(img/textures/icon_rank.png);
				
				background-size: 100% 100%;
			}
			.icon_diamond{
				
				background-image: url(img/textures/icon_diamond.png);
				
				background-size: 100% 100%;
			}
			.icon_gold{
				
				background-image: url(img/textures/icon_gold.png);
				
				background-size: 100% 100%;
			}
			.icon_text{
				color: yellow;
				margin-bottom: 3.125rem;
			}
			.icon_fight{
				
				background-image: url(img/textures/icon_fight.png);
				
				background-size: 100% 100%;
			}
			.icon_energy{
				
				background-image: url(img/textures/icon_energy.png);
				
				background-size: 100% 100%;
			}
			.fist_box_tow{
				width: 50%;
				height:2.1875rem;
				background-image: url(img/textures/bg_timer.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				
			}
			.timer{
				display: inline-flex;
				justify-content: space-between;
				color: #e3e867;
				width: 80%;
				flex-wrap: wrap;
			}
			.btn_main{
				background-image: url(img/textures/bg_main_btns.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				height: 88px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 5px 20px;
			}
			.btns_sub{
				background-image: url(img/textures/bg_sub_btns.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				height: 65px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 5px 40px;
				margin-bottom: -10px;
				transition: top 2s;
			}
			.sub_icon{
				background-repeat: no-repeat;
				
				height: 50px;
				width: 45px;
				display: flex;
				align-items: flex-end;
				justify-content: center;
			}
			.icon_backpack{
				
				background-image: url(img/textures/home_btns/btn_backpack.png);
				
				background-size: 100% 100%;
			}
			.fold{
				background-image: url(img/textures/btn_expand_slot.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 65px;
				height: 18px;
				text-align: center;
				padding-top: 4px;
				position: relative;
				left: 50%;
				top: 10px;
				transform: translateX(-50%);
				z-index: 90;
				transition: top 2s;
			}
			.fold_up2down{
				transform: translate(-50%,60px) rotate(180deg);
			}
			.sub_up2down{
				transform: translateY(60px);
			}
			.main_up2down{
				transform: translateY(0px);
			}
			.fold_down2up{
				transform: translate(-50%,0px) rotate(0deg);
			}
			.sub_down2up{
				transform: translateY(0px);
			}
			.youx{
				padding-top: 10px;
				padding-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="top">
				<div class="fist_box">
					<div class="fist_box_one">
						<span class="icon icon_rank">99</span>
						<span class="icon_text">卢克断手者</span>
					</div>
					<div class="fist_box_one">
						<span class="icon icon_diamond">&nbsp;</span>
						<span class="icon_text">6688999</span>
					</div>
					<div class="fist_box_one">
						<span class="icon icon_gold">&nbsp;</span>
						<span class="icon_text">999999</span>
					</div>
				</div>
			
				<div class="second_box">
					<div class="fist_box">
						<div class="fist_box_tow">
							<span class="icon icon_fight">&nbsp;</span>
							<div class="timer">
								<span>剩余时间<span>0:08</span></span>
								<span>57/120</span>
								<img src="img/textures/timer_bar.png" height="5" width="80%" >
							</div>
						</div>
							<div class="fist_box_tow">
								<span class="icon icon_energy">&nbsp;</span>
								<div class="timer">
									<span>剩余时间<span>0:08</span></span>
									<span>57/120</span>
									<img src="img/textures/timer_bar.png" height="5" width="80%" >
								</div>
							</div>
					</div>
						
				</div>
				<div class="youx">
					<img src="img/textures/btn_message.png" width="38" height="46">
				</div>
			
		</div>
		<div class="bottom" >
			<div class="fold">
				<img src="img/textures/btn_fold.png" width="49" height="15" />
			</div>
			<div class="btns_sub">
				<div class="sub_icon icon_backpack">
					<img src="img/textures/txt_beibao.png" width="28" height="35" />
				</div>
			</div>
			<div class="btn_main">
				<img src="img/textures/home_btns/btn_home.png" width="42" height="55" />
				<img src="img/textures/home_btns/btn_level.png" width="42" height="55" />
				<img src="img/textures/home_btns/btn_raid.png" width="42" height="55" />
				<img src="img/textures/home_btns/btn_shop.png" width="42" height="55" />
				<img src="img/textures/home_btns/btn_friends.png" width="42" height="55" />
				<img src="img/textures/home_btns/btn_setting.png" width="42" height="55" />
			</div>
		</div>
		</div>
		<script src="../../js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
			$(function(){
				let isDown=false;
				$(".fold").click(function(){
				if (isDown) {
					$(this).addClass("fold_down2up");
					$(".btns_sub").addClass("sub_down2up");
				} else{
					
					$(this).attr("class" ,"fold fold_up2down");
					$(".btns_sub").attr("class", "btns_sub sub_up2down");
					$(".btn_main").attr("class", "btn_main main_up2down");
				}
				isDown=!isDown;
				});
			});
		</script>
	</body>
</html>
